<template>
	<div class='background'>
		<div class='login'>
			<div class=title>
				<img src="../../assets/images/logo_B.png">
				<label>测试平台</label>
			</div>
			<el-form :model="loginForm" :rules="loginRules" ref='loginRef'>
				<el-form-item prop="username">
				  <el-input v-model="loginForm.username"  placeholder="请输入用户名">
					  <template #prefix>
					       <el-icon :size="20"><User /></el-icon>
					  </template>
				  </el-input>
				</el-form-item>
				<el-form-item prop="password">
				  <el-input v-model="loginForm.password"  placeholder="请输入密码" show-password>
					   <template #prefix>
					        <el-icon :size="20"><Lock /></el-icon>
					   </template> 
				  </el-input>
				</el-form-item>
				<el-form-item label="记住用户">
				  <el-switch v-model="loginForm.status" />
<!-- 				  <label style="color: white; position: absolute; left: 200px; font-family: Arial; font-size: 14px;">没有账号?</label> -->
				  <!-- <el-link type="success">点击注册</el-link> -->
<!-- 				  <label class="to_register" @click="jumpRegister" >点击注册</label> -->
				</el-form-item>
				<el-form-item>
				  <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	
</template>

<script type='text/javascript'>
import api from '../../api/index.js'
import {mapMutations} from 'vuex'
import { ElMessage } from 'element-plus'
export default {
	data() {
		return {
			role_permissions: '',
			loginForm: {
				username: '',
				password: '',
				status: false
			},
			loginRules: {
				username: [{
					required: true,
					message: '用户名不能为空',
					trigger: 'blur',

				}],
				password: [{
					required: true,
					message: '密码不能为空',
					trigger: 'change',

				}
				],
			}
		}
	},
	methods: {
		...mapMutations(['saveRoleId', 'saveUserId', 'saveUserName']),
		async getUser(id){
			const response = await this.$api.getUser(id)
			if(response.status === 200){
				this.role_permissions = response.data.result.role_info.role_permissions
			}
		},
		async login(){
			this.$refs['loginRef'].validate(async (valid, fields)=>{
				if(valid){
					const response = await api.loginApi(this.loginForm)
					if (response.status === 200){
						const role_id = response.data.result.role_id
						const user_id = response.data.result.user_id
						const username = response.data.result.user_name
						this.saveRoleId(role_id)
						this.saveUserId(user_id)
						this.saveUserName(username)
						// this.getUser(user_id)
						// window.localStorage.setItem('role_permissions', JSON.stringify(this.role_permissions))
						window.localStorage.setItem('token', JSON.stringify(response.data.result.token_access))
						window.localStorage.setItem('userinfo', JSON.stringify(this.loginForm))
						this.$router.push({name: 'myProject'})
						ElMessage({
						    message: '登录成功',
						    type: 'success',
						  })
					}else{
						ElMessage({
						    message: '账号或密码错误',
						    type: 'error',
						  })
					}
					
				}
			})
		},
		jumpRegister(){
			this.$router.push({name: 'register'})
		}
	},
	created() {
		const userinfo = window.localStorage.getItem('userinfo')
		if (userinfo){
			this.loginForm = JSON.parse(userinfo)
		}
	}
}
</script>

<style scoped>
	.background {
		background-image: url('../../assets/images/login.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		width: 100%;
	}
	.title {
		height: 50px;
		line-height: 50px;
		margin: 30px auto;
		color: white;
	}
	label {
		display: inline-block;
		font-size: 50px;
		font-style: italic;
		vertical-align: 11px;
	}
	img {
		width: 50px;
		height: 50px;
	}
	.login .el-form-item__label{
		color: white;
	}
	.login .el-link.el-link--info{
		color: white;
		/* --el-link-text-color: #fff; */
		position: absolute;
		left: 270px;
	}
	a:hover {
		color: black;
	}
	.login {
		width: 400px;
		height: 400px;
		margin: calc((100vh - 400px)/2) auto;
		text-align: center;
	}
	.to_register{
		color: white;
		position: absolute;
		left: 270px;
		font-family: Arial;
		font-size: 14px;
	}
	.to_register:hover{
		color: royalblue;
	}
	
	/deep/.el-form-item__label{
		color: white !important;
	}
</style>